/* ===================================================================
   活动类型管理页面样式
   基于Apple Design System
   版本：v1.0
   创建时间：2025-07-20
=================================================================== */

/* 页面布局继承主样式 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--system-grouped-background);
}

/* 主内容区 */
.main-content {
    margin-left: 240px;
    margin-top: 60px;
    padding: var(--spacing-6);
    min-height: calc(100vh - 60px);
}

/* 页面头部 */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--spacing-6);
}

.header-left {
    flex: 1;
}

.page-title {
    font-size: var(--font-size-large-title);
    font-weight: var(--font-weight-bold);
    color: var(--label-primary);
    margin-bottom: var(--spacing-1);
}

.page-subtitle {
    font-size: var(--font-size-body);
    color: var(--label-secondary);
    line-height: 1.4;
}

.header-right {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-1);
}

/* 章节样式 */
.preset-types-section,
.custom-types-section {
    background-color: var(--system-background);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-small);
    overflow: hidden;
    margin-bottom: var(--spacing-6);
}

.section-header {
    padding: var(--spacing-5);
    border-bottom: 1px solid var(--separator-non-opaque);
    background-color: var(--system-background-secondary);
}

.section-title {
    font-size: var(--font-size-title-2);
    font-weight: var(--font-weight-semibold);
    color: var(--label-primary);
    margin-bottom: var(--spacing-1);
}

.section-subtitle {
    font-size: var(--font-size-subhead);
    color: var(--label-secondary);
    line-height: 1.4;
}

/* 预设类型网格 */
.preset-types-grid {
    padding: var(--spacing-5);
}

.type-category {
    margin-bottom: var(--spacing-8);
}

.type-category:last-child {
    margin-bottom: 0;
}

.category-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-title-3);
    font-weight: var(--font-weight-semibold);
    color: var(--label-primary);
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-2);
    border-bottom: 2px solid var(--separator-non-opaque);
}

.category-title i {
    color: var(--apple-blue);
}

.type-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-4);
}

/* 类型卡片 */
.type-card {
    background-color: var(--system-background);
    border: 1px solid var(--separator-non-opaque);
    border-radius: var(--radius-large);
    overflow: hidden;
    transition: all var(--transition-normal);
    position: relative;
}

.type-card:hover {
    box-shadow: var(--shadow-medium);
    transform: translateY(-2px);
}

.type-card.preset {
    border-left: 4px solid var(--apple-blue);
}

.type-card.custom {
    border-left: 4px solid var(--apple-green);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-4);
    background-color: var(--system-background-secondary);
}

.type-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-large);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.type-icon.preset-icon {
    background-color: var(--apple-blue);
}

.type-icon.custom-icon {
    background-color: var(--apple-green);
}

.type-status {
    display: flex;
    align-items: center;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: var(--font-size-caption-1);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.status-badge.status-active {
    background-color: rgba(52, 199, 89, 0.1);
    color: #248A3D;
}

.status-badge.status-inactive {
    background-color: var(--fill-secondary);
    color: var(--label-secondary);
}

.card-body {
    padding: var(--spacing-4);
}

.type-name {
    font-size: var(--font-size-headline);
    font-weight: var(--font-weight-semibold);
    color: var(--label-primary);
    margin-bottom: var(--spacing-2);
}

.type-description {
    font-size: var(--font-size-subhead);
    color: var(--label-secondary);
    line-height: 1.4;
    margin-bottom: var(--spacing-4);
}

.type-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-subhead);
}

.detail-label {
    color: var(--label-secondary);
}

.detail-value {
    color: var(--label-primary);
    font-weight: var(--font-weight-medium);
}

.card-footer {
    display: flex;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    border-top: 1px solid var(--separator-non-opaque);
    background-color: var(--system-background-tertiary);
}

.card-footer .btn {
    flex: 1;
}

/* 自定义类型容器 */
.custom-types-container {
    padding: var(--spacing-5);
}

.custom-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-4);
}

/* 空状态 */
.empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16);
    text-align: center;
}

.empty-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background-color: var(--fill-quaternary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-4);
}

.empty-icon i {
    font-size: 32px;
    color: var(--label-tertiary);
}

.empty-state h3 {
    font-size: var(--font-size-title-3);
    font-weight: var(--font-weight-semibold);
    color: var(--label-primary);
    margin-bottom: var(--spacing-2);
}

.empty-state p {
    font-size: var(--font-size-body);
    color: var(--label-secondary);
    margin-bottom: var(--spacing-4);
    max-width: 400px;
}

/* 模态框样式 */
.modal.large {
    width: 90vw;
    max-width: 800px;
    max-height: 90vh;
}

.activity-type-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.section-title {
    font-size: var(--font-size-headline);
    font-weight: var(--font-weight-semibold);
    color: var(--label-primary);
    margin-bottom: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--separator-non-opaque);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-3);
}

.required {
    color: var(--apple-red);
}

/* 图标选择器 */
.icon-selector {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

.icon-btn {
    width: 40px;
    height: 40px;
    border: 2px solid var(--separator-opaque);
    background-color: var(--system-background-secondary);
    border-radius: var(--radius-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--label-secondary);
}

.icon-btn:hover {
    border-color: var(--apple-blue);
    background-color: rgba(0, 122, 255, 0.1);
    color: var(--apple-blue);
}

.icon-btn.active {
    border-color: var(--apple-blue);
    background-color: var(--apple-blue);
    color: white;
}

/* 范围输入 */
.range-inputs {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.range-input {
    flex: 1;
    min-width: 80px;
}

.range-separator {
    color: var(--label-secondary);
    font-weight: var(--font-weight-medium);
}

.range-unit {
    color: var(--label-secondary);
    font-size: var(--font-size-subhead);
    white-space: nowrap;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .main-content {
        margin-left: 0;
        padding: var(--spacing-4);
    }
    
    .page-header {
        flex-direction: column;
        gap: var(--spacing-4);
        align-items: stretch;
    }
    
    .header-right {
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .preset-types-grid,
    .custom-types-container {
        padding: var(--spacing-4);
    }
    
    .type-cards,
    .custom-types-grid {
        grid-template-columns: 1fr;
    }
    
    .category-title {
        font-size: var(--font-size-headline);
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .icon-selector {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: var(--spacing-3);
    }
    
    .preset-types-section,
    .custom-types-section {
        border-radius: var(--radius-medium);
    }
    
    .section-header {
        padding: var(--spacing-4);
    }
    
    .preset-types-grid,
    .custom-types-container {
        padding: var(--spacing-3);
    }
    
    .card-header,
    .card-body,
    .card-footer {
        padding: var(--spacing-3);
    }
    
    .empty-state {
        padding: var(--spacing-12);
    }
    
    .modal.large {
        margin: var(--spacing-4);
        max-width: calc(100vw - 32px);
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.type-card {
    animation: fadeIn 0.3s ease-out;
}

/* 拖拽排序支持（未来功能） */
.type-card.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
    z-index: var(--z-modal);
}

.type-cards.drag-over {
    background-color: rgba(0, 122, 255, 0.05);
}

/* 表单验证样式 */
.form-input.error {
    border-color: var(--apple-red);
    box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.25);
}

.form-input.error:focus {
    border-color: var(--apple-red);
    box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.25);
}

.error-message {
    font-size: var(--font-size-caption-1);
    color: var(--apple-red);
    margin-top: var(--spacing-1);
}

/* 成功状态 */
.form-input.success {
    border-color: var(--apple-green);
}

.form-input.success:focus {
    border-color: var(--apple-green);
    box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.25);
}